<template>
  <n-config-provider
    :theme="getDarkTheme"
    :theme-overrides="themeOverrides"
    :locale="mylanguage"
    :date-locale="dateZhCN"
    :class="[getDarkTheme ? 'dark-theme' : 'light-theme']"
  >
    <AppProvider>
      <layout></layout>
      <n-global-style />
    </AppProvider>
  </n-config-provider>
</template>

<script lang="ts" setup>
import WebBaseEnum from "@/enums/webBaseEnum";
import { AppProvider } from "@/components/Application/index";
import { darkTheme, dateZhCN } from "naive-ui";
import layout from "@/layouts/index.vue";
import { useDesignSettingStore } from "@/store/modules/designSetting";
import { useLanguage } from "@/store/modules/language";

document.title = WebBaseEnum.title;
const designStore = useDesignSettingStore();
const languageStore = useLanguage();

const themeOverrides = computed(() => designStore.getThemeOverrides());
const getDarkTheme = computed(() =>
  designStore.darkTheme ? darkTheme : undefined,
);
const mylanguage = ref(null);
watchEffect(() => {
  mylanguage.value = languageStore.getLocaleLanguage;
});
</script>
